<template>
    <div class="songBg" v-if="songList.length !== 0">
        <div  class="bg">
            <div class="touxiang">
                <img :src="songList.al.picUrl" alt="">
            </div>
            <div class="songTxt">
                <div class="songname">{{songList.al.name}}</div>
                <div class="singername">{{songList.ar[0].name}}</div>
            </div>
            <div class="icon">
                <i class="next iconfont icon-shangyishou" @click="prevSong()"></i>
                <i class="bofang iconfont icon-zanting" @click="play()"></i>
                <i class="prev iconfont icon-xiayishou" @click="nextSong()"></i>
            </div>
        </div>
        <i class="back iconfont icon-fanhui" @click="forback()"></i>
        <!-- 热门评论 -->
       <div class="comment" v-if="comment.length !== 0">
           <p>热门评论</p>
            <ul class="clearfix">
                <li v-for="(item,index) in comment.hotComments" :key="index" class="clearfix">
                    <!-- 头像 -->
                    <div class="touxiang">
                        <img :src="item.user.avatarUrl" alt="">
                    </div>
                    <!-- 用户名 评论内容 -->
                    <div class="content">
                        <div class="name">{{item.user.nickname}}</div>
                        <div class="updateTime">{{format(item.time)}}</div>
                        <div class="con">{{item.content}}</div>
                        <div class="like">
                            <span>{{item.likedCount}}</span>
                            <i class="iconfont icon-dianzan"></i>
                        </div>
                        
                    </div>
                </li>
            </ul>
        </div>
        <!-- 评论 -->
        <div class="comment" v-if="comment.length !== 0">
            <p>精彩评论</p>
            <ul class="clearfix">
                <li v-for="(item,index) in comment.comments" :key="index" class="clearfix">
                    <!-- 头像 -->
                    <div class="touxiang">
                        <img :src="item.user.avatarUrl" alt="">
                    </div>
                    <!-- 用户名 评论内容 -->
                    <div class="content">
                        <div class="name">{{item.user.nickname}}</div>
                        <div class="updateTime">{{format(item.time)}}</div>
                        <div class="con">{{item.content}}</div>
                        <div class="like">
                            <span>{{item.likedCount}}</span>
                            <i class="iconfont icon-dianzan"></i>
                        </div>
                        
                    </div>
                </li>
            </ul>
        </div>
    </div>
</template>
<script>
import axios from "axios";
export default {
    data:function(){
        return{
            id:'',
            songList:[],
            allSong:[],
            songIndex:0,
            //评论内容
            comment:[]
        }
    },
    mounted:function(){
        this.id = this.$route.query.id;
        this.allSong = this.$store.state.list;
        this.songIndex = this.$store.state.listIndex;
        this.getSong(this.id);
        
    },
    methods:{
        forback:function(){
             this.$parent.$router.go(-1);
        },
         play:function(){
            var bofang = document.getElementsByClassName("bofang")[0];
            //window.console.log(this.$parent);
            if(this.$parent.$store.state.playState == true){
                //暂停
                
                this.$parent.$refs.player.$refs.audio.pause();
                 bofang.classList.remove("icon-zanting");
                bofang.classList.add("icon-bofang");
                this.$parent.$store.commit("change",{playState:false});
            }else{//播放
                this.$parent.$refs.player.$refs.audio.play();
                bofang.classList.remove("icon-bofang");
                bofang.classList.add("icon-zanting");
                this.$parent.$store.commit("change",{playState:true});
            }
        },
        //上一首
        prevSong:function(){
            if(this.songIndex == 0){
                return false;
            }
            this.id = this.allSong[ --this.songIndex ];
            this.$store.commit("change",{id:this.id});
            this.$parent.$refs.player.getSong();
            this.getSong(this.id);
        },
        //下一首
        nextSong:function(){
            if(this.songIndex == this.allSong.length-1){
               return false;
            }
            this.id = this.allSong[ ++this.songIndex ];
            this.$store.commit("change",{id:this.id});
            this.$parent.$refs.player.getSong();
            this.getSong(this.id);
        },
        getSong:function(id){
            var that = this;
            axios.get("http://netease.bluej.cn/song/detail",{
                params:{
                    ids:id
                }
            }).then(function(res){
                that.songList = res.data.songs[0];
            });
            axios.get("http://netease.bluej.cn/comment/music?timestamp=1503",{
                params:{
                    id:id
                }
            }).then(function(res){
                that.comment = res.data;
            })
        },
        format:function(time){
            var t = new Date(time);
            var year = t.getFullYear();
            var month = (t.getMonth()+1);
            var day = t.getDate();
            if(month<10){
                month = "0"+month;
            }
            if(day<10){
                day = "0"+day;
            }
            return t = year+"/"+month+"/"+day;
        }
    }
}
</script>
<style scoped lang="scss">
.clearfix:after{
    content:"";
    display:block;
    clear:both;
}
.active{
    animation: rotateimg 5s linear infinite;
}
@keyframes rotateimg{
    100%{
        transform:rotate(360deg);
    }
}
.songBg{
    width:100vw;
    
    overflow: hidden;
    position:relative;
    .bg{
        width:100vw;
        height:100vh;
        background:#f0a2ec;
        position:relative;
        .touxiang{
            position: absolute;
            width:70vw;
            height:70vw;
            border-radius: 50%;
            z-index:2;
            left:15vw;
            top:10vh;
            img{
                display:block;
                width:100%;
                height:100%;
                border-radius: 50%;
                margin:7vw auto 0;
            }
        }
        .songTxt{
            width:80vw;
            position:absolute;
            left:10vw;
            bottom:25vh;
            z-index:3;
            text-align:center;
            color:#fff;
            line-height:30px;
        }
        .icon{
            width:60vw;
            position:absolute;
            left:20vw;
            bottom:15vh;
            z-index:3;
            color:#fff;
            .next{
                font-size:35px;
            }
            .bofang{
                font-size:40px;
                margin:0 15vw;
            }
            .prev{
                font-size:35px;
            }
        }
    }
    .back{
        position:absolute;
        top:5px;
        left:10px;
        z-index:99;
        font-size:30px;
        color:#fff;
    }
    .comment{
        width:100vw;
        p{
            width:100vw;
            line-height:10vw;
            padding-left:10px;
        }
        ul{
            margin-top:3vh;
            li{
                list-style:none;
                width:100vw;
                margin-bottom:3vw;
                position:relative;
                padding-bottom:3vw;
                border-bottom:1px solid #f6f6f7;
                .touxiang{
                    float:left;
                    width:10vw;
                    margin:10px;
                    img{
                        display: block;
                        width:100%;
                        height:10vw;
                        border-radius: 50%;
                    }
                }
                .content{
                    float:left;
                    width:84vw;
                    .name{
                        line-height:35px;
                        font-size:14px;
                    }
                    .updateTime{
                        font-size:14px;
                        line-height:30px;
                    }
                    .con{
                        font-size:14px;
                        line-height:30px;
                        padding-right:10px;
                    }
                    .like{
                        position: absolute;
                        top:2vw;
                        right:5vw;
                        color:#d8524a;
                        span{
                            font-size:14px;
                        }
                    }
                }
            }
        }
    }
}
    
</style>